<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />项目管理</h3>

    <el-card>
      <div slot="header">
        <span>项目详情</span>
      </div>
      <h3 class="titles">收据模板 <el-input v-model="mu"
                  placeholder="请输入收款票据名称"
                  style="width:200px;margin:0 15px"></el-input>
        <el-button type="primary"
                   @click="setMu">编辑</el-button>
      </h3>

      <div class="wrapper">
        <h3>{{mu}} <span class="num">000560</span></h3>
        <p><span class="title">收款收据</span> <span class="date">2019年10月24日</span></p>

        <div class="list">
          <div class="list-item">
            <div class="username">客户姓名</div>
            <div class="user-input"></div>
            <div class="room">房号</div>
            <div class="user-room"></div>
            <div class="user-num">认购书编号</div>
            <div class="user-nums"></div>
          </div>
          <div class="list-item">
            <div class="item1">收款项目</div>
            <div class="item2">付款方式</div>
            <div class="item3">金额</div>
          </div>
          <div class="list-item h100">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
          </div>
          <div class="list-item">
            <div class="item-name">合计人名币（大写）</div>
            <div class="user-input"></div>
            <div class="total">合计（小写）</div>
            <div class="total-input"></div>
          </div>
          <div class="list-item">备注</div>
        </div>
        <p class="last"> <span>单位盖章：</span> <span class="date">收款机器编号：00005</span></p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { upDateM } from "@/api/project"
export default {
  data () {
    return {
      mu: "",
      id: ''
    }
  },
  mounted () {
    this.mu = this.$route.query.m;
    this.id = this.$route.query.id
  },
  methods: {
    setMu () {
      if (this.mu == '') {
        return this.$message({
          message: "请输入票据名称", type: "warning"
        })
      }
      upDateM(this.id, this.mu).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: "success"
          })
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.wrapper {
  width: 1200px;
  margin: 10px auto;
  background: #eee;
  padding: 20px 70px;
  h3 {
    text-align: center;
    font-size: 24px;
    overflow: hidden;
    .num {
      color: red;
      font-size: 18px;
      float: right;
      font-weight: 400;
    }
  }
  p {
    text-align: center;
    overflow: hidden;
    .title {
      letter-spacing: 4px;
      font-size: 16px;
    }
    .date {
      float: right;
      font-size: 16px;
    }
  }
  .list {
    margin: 10px 0;
    border: 1px solid #000;
    border-bottom: 0;
    position: relative;
    &:after {
      content: "";
      width: 128px;
      height: 128px;
      background: url(../../../assets/zhang.png) no-repeat;
      background-size: cover;
      position: absolute;
      bottom: 60px;
      left: 100px;
    }
    .list-item {
      display: flex;
      height: 60px;
      line-height: 60px;
      padding: 0 10px;
      border-bottom: 1px solid #000;
      .username {
        width: 100px;
        padding: 0 10px;
        border-right: 1px solid #000;
      }
      .user-input {
        flex: 1;
        border-right: 1px solid #000;
      }
      .room {
        width: 60px;
        text-align: center;
        border-right: 1px solid #000;
      }
      .user-room {
        padding: 0 15px;
        width: 246px;
        border-right: 1px solid #000;
      }
      .user-num {
        padding: 0 10px;
        width: 140px;
        border-right: 1px solid #000;
      }
      .user-nums {
        width: 24%;
      }
      .item1 {
        padding: 0 10px;
        width: 33%;
        text-align: center;
        border-right: 1px solid #000;
      }
      .item2 {
        padding: 0 10px;
        width: 28%;
        text-align: center;
        border-right: 1px solid #000;
      }
      .item3 {
        flex: 1;
        padding-left: 100px;
      }
      .item-name {
        border-right: 1px solid #000;
      }
      .total {
        width: 120px;
        border-right: 1px solid #000;
      }
      .total-input {
        width: 200px;
      }
    }
    .h100 {
      height: 260px;
    }
  }
  .last {
    text-align: left;
    span {
      display: inline-block;
      margin-left: 80px;
      margin-right: 60px;
    }
  }
}
</style>